{% extends "IncetOps/base/base.html" %}

{% block title %}统计{% endblock %}

{% block head %}
    <script src="/static/IncetOps/js/echarts.min.js"></script>
{% endblock %}

{% block page %}
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div id="statistics" style="width: 100%; height: 700px;"></div>
        </div>
    </div>
</div>
{% endblock %}

{% block script %}
    <script type="text/javascript">
        layui.use("incetops", function() {
            var incetops = layui.incetops;
            incetops.ajax("/IncetOps/api/?Action=MiscGetStatistic", function(res) {
                // 基于准备好的dom，初始化echarts实例
                var obj = echarts.init(document.getElementById('statistics'));
                // 指定图表的配置项和数据
                var opt = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: res.catalosg
                    },
                    series: [{
                        name: '操作类型',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: [0, '30%'],
                        label: {
                            normal: {
                                position: 'inner'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        //一级分类data
                        data: res.data.first
                    }, {
                        name: 'Alter子类型',
                        type: 'pie',
                        radius: ['40%', '55%'],
                        label: {
                            normal: {
                                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                backgroundColor: '#eee',
                                borderColor: '#aaa',
                                borderWidth: 1,
                                borderRadius: 4,
                                shadowBlur: 3,
                                shadowOffsetX: 2,
                                shadowOffsetY: 2,
                                shadowColor: '#999',
                                padding: [0, 7],
                                rich: {
                                    a: {
                                        color: '#999',
                                        lineHeight: 22,
                                        align: 'center'
                                    },
                                    /*访问来源样式
                                    abg: {
                                        backgroundColor: '#333',
                                        width: '100%',
                                        align: 'right',
                                        height: 22,
                                        borderRadius: [4, 4, 0, 0]
                                    },
                                    */
                                    hr: {
                                        borderColor: '#aaa',
                                        width: '100%',
                                        borderWidth: 0.5,
                                        height: 0
                                    },
                                    b: {
                                        fontSize: 16,
                                        lineHeight: 33
                                    },
                                    per: {
                                        color: '#eee',
                                        backgroundColor: '#334455',
                                        padding: [2, 4],
                                        borderRadius: 2
                                    }
                                }
                            }
                        },
                        //二级分类data
                        data: res.data.second
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                obj.setOption(opt);
            }, {
                method: 'get'
            });
        });
    </script>
{% endblock %}

